<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <canvas id="c"></canvas>
  <body></body>

  <script>
    const canvas = document.getElementById('c')
    const gl = canvas.getContext('webgl')

    const vertexShaderSource = `
        attribute vec3 position; 
        void main() {
            gl_Position = vec4(position,1); 
        }
    `

    const fragmentShaderSource = `
        precision mediump float;
        void main() {
            gl_FragColor = vec4(1, 0, 0.5, 1); 
        }
    `

    // 创建着色器方法，输入参数：渲染上下文，着色器类型，数据源
    function createShader(gl, type, source) {
      var shader = gl.createShader(type) // 创建着色器对象
      gl.shaderSource(shader, source) // 提供数据源
      gl.compileShader(shader) // 编译 -> 生成着色器
      var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS)
      if (success) {
        return shader
      }

      console.log(gl.getShaderInfoLog(shader))
      gl.deleteShader(shader)
    }

    function createProgram(gl, vertexShader, fragmentShader) {
      var program = gl.createProgram()
      gl.attachShader(program, vertexShader)
      gl.attachShader(program, fragmentShader)
      gl.linkProgram(program)
      const success = gl.getProgramParameter(program, gl.LINK_STATUS)
      if (success) {
        return program
      }
      console.log(gl.getProgramInfoLog(program))
      gl.deleteProgram(program)
    }

    const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource)
    console.log(vertexShader, '88')
    const fragmentShader = createShader(
      gl,
      gl.FRAGMENT_SHADER,
      fragmentShaderSource
    )
    // Link the two shaders into a program
    var program = createProgram(gl, vertexShader, fragmentShader)
    // 找到 属性值所在的数据的位置
    var positionAttributeLocation = gl.getAttribLocation(program, 'position')

    // 属性值 从是从缓冲去拿的  创建一个缓冲
    var positionBuffer = gl.createBuffer()

    // 绑定点
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)

    // 往缓冲中去放数据

    // 三个二维点坐标
    var positions = [0, 0, 0, 0.5, 0.7, 0]
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW)

    // 设置视口
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height)

    // 清除canvas
    gl.clearColor(0, 0, 0, 0)
    gl.clear(gl.COLOR_BUFFER_BIT)

    // 使用哪一个着色器语言
    gl.useProgram(program)

    // 告诉webgl 准备从之前的缓冲获取数据给着色器的属性
    gl.enableVertexAttribArray(positionAttributeLocation)

    // 将绑定点绑定到缓冲数据（positionBuffer）
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)

    // 告诉属性怎么从positionBuffer中读取数据 (ARRAY_BUFFER)
    const size = 3 // 每次迭代运行提取两个单位数据  {x:0,y:0,z:0,w :1}
    const type = gl.FLOAT // 每个单位的数据类型是32位浮点型
    const normalize = false // 不需要归一化数据
    const stride = 0 // 0 = 移动单位数量 * 每个单位占用内存（sizeof(type)）
    // 每次迭代运行运动多少内存到下一个数据开始点
    const offset = 0 // 从缓冲起始位置开始读取
    gl.vertexAttribPointer(
      positionAttributeLocation,
      size,
      type,
      normalize,
      stride,
      offset
    )
    // draw
    gl.drawArrays(gl.TRIANGLES, 0, 3)
  </script>
</html>
